<%@ page language="java" contentType="text/html; charset=UTF-8" isELIgnored="false"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<base href="${ctx}">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<link type="text/css" media="screen" charset="utf-8" rel="stylesheet" href="${ctx}/commons/css/common.css" />
<script type="text/javascript" src="${ctx}plugins/jquery/jquery-1.7.min.js"></script>
<script type="text/javascript">
	window.onload = function(){
		//设置节点详情的位置
		$("#ul").css("margin-left",(document.body.scrollWidth-432)/2);
		$("#nodeDetailDIV").css("top", $("#endNode").offset().top+45);
		//设置操作详情的位置
		$("#detailDIV").css("top", $("#endNode").offset().top+80);
		//鼠标经过时结果行背景变色
		$(".tb-table>table tr:gt(0)").hover(function() {
			$(this).css("background", "#EEEEEE");
		}, function() {
			$(this).css("background", "");
		});
	};
	function displayInfo(count){
		var node = $("#node_"+count).children();
		$("#nodeIndex").html(node[0].innerHTML);
		$("#userName").html(node[1].innerHTML);
		$("#refNodes").html(node[2].innerHTML);
		$("#memo").html(node[3].innerHTML);
		$("#ul").css("display", "block");
	}
	function seout(){
		$("#ul").css("display", "none");
	}
	
	function submitStatus(c){
		var relatedNo = $.trim($("#relatedNo").val());
		var nodeComments = $.trim($("#comments").val());
		var status = $.trim(c);
		if (Boolean(relatedNo) && Boolean(nodeComments) && Boolean(status)) {
			$("#prompt").html("");
			$.post(
				"dispatcherStation.htm",
				{
					action : "OPERATION_THIS",
					relatedNo : relatedNo,
					nodeComments : nodeComments,
					status: status
				},
				function(data) {
					if (data == 'Y') {
						$("#prompt").css("color", "green");
						$("#prompt").html("操作成功！");
					}else{
						$("#prompt").html("操作失败！\n可能已被操作，请重新打开！");
					}
					$("#pass").css("display", "none");
					$("#fail").css("display", "none");
					$("#back").css("display", "none");
				});
		}else{
			$("#prompt").html("评语不可为空！");
		}
	}
</script>
<style type="text/css">
	.start{ background:url(${ctx}img/start.png) no-repeat; width:42px; height:80px; display:block;float: left;}
	.node{ background:url(${ctx}img/node.png) no-repeat; width:97px; height:80px; display:block;float: left;}
	.node p{ margin: 7px 9px; color: white; line-height: 20px; font-weight: bold;}
	.signNode{ background:url(${ctx}img/signNode.png) no-repeat; width:97px; height:80px; display:block;float: left;}
	.signNode p{ margin: 7px 9px; color: white; line-height: 20px; font-weight: bold;}
	.to_as{ background:url(${ctx}img/to.png) no-repeat; width:42px; height:80px; display:block;float: left;}
	.end{ background:url(${ctx}img/end.png) no-repeat; width:43px; height:80px; display:block;float: left;}
	.ul li{float:left;}
	.lic{ background:url(${ctx}img/prop.png) no-repeat; width:88px; height:88px;margin-left: 20px;}
	.lic p{ margin-top: 8px;}
	hr{margin-top: 1px;margin-bottom:1px; border-top:1px solid #000;height:0; line-height:0; width:69px; overflow:hidden;}
 	#prompt{float: right;font-size: 2ex;font-weight: bold;color: red;padding: 12px 10px 0px 10px;}
 	.tt tr td{border: 0;}
</style>
<c:if test="${instanceModel != null}">
	<h3 class="fn-mt7">${instanceModel.flowName }（流程图）</h3><br>
	<div align="center">
		<ul>
			<li class="start"></li>
			<c:if test="${instanceModel.nodeList != null }">
				<c:forEach var="node" items="${instanceModel.nodeList }">
					<li class="to_as"></li>
					<c:choose>
						<c:when test="${node.nodeIndex eq instanceModel.currentNodeIndexes[0]}">
							<li class="signNode" onmouseover="displayInfo('${node.nodeIndex}')" onmouseout="seout()"><p>${node.nodeName}</p><hr/><p>${node.nodeIndex}</p></li>
						</c:when>
						<c:otherwise>
							<li class="node" onmouseover="displayInfo('${node.nodeIndex}')" onmouseout="seout()"><p>${node.nodeName}</p><hr/><p>${node.nodeIndex}</p></li>
						</c:otherwise>
					</c:choose>
					<div id="node_${node.nodeIndex }" style="display: none;">
						<span>${node.nodeIndex}</span>
						<span>
							<c:choose>
								<c:when test="${!empty node.userName}">
									<c:if test="${!empty userMap}">${userMap[node.userName]}</c:if>
								</c:when>
								<c:otherwise>
									<c:if test="${!empty deptMap}">${deptMap[node.deptNo]}</c:if>
									<c:if test="${!empty node.deptNo && !empty node.postNo}"> <font color="brown">并且是</font> </c:if>
									<c:if test="${!empty postMap}">${postMap[node.postNo]}</c:if>
								</c:otherwise>
							</c:choose>
						</span>
						<span>${node.refNodes}</span>
						<span>${node.memo}</span>
					</div>
				</c:forEach>
			</c:if>
			<li class="to_as"></li>
			<li id="endNode" class="end"></li>
		</ul>
	</div><br><br>
	<div id="nodeDetailDIV" align="center" style="position: absolute; z-index: 9999;"><br><br>
		<ul id="ul" class="ul" style="display: none;">
			<li class="lic"><p>节点序号</p><hr><span id="nodeIndex"></span></li>
			<li class="lic"><p>节点操作人</p><hr><span id="userName"></span></li>
			<li class="lic"><p>参考节点</p><hr><span id="refNodes"></span></li>
			<li class="lic"><p>节点描述</p><hr><span id="memo"></span></li>
		</ul>
	</div>
	<div id="detailDIV" style="position: absolute;width: 100%">
		<h3 class="fn-mt7">
			<span style="float: left; font-size: 14px; font-weight: bold;">操作详情</span>
			<br style="height: 0; clear: both;" />
		</h3>
		<div class="tb-table">
			<table id="tab">
				<thead>
					<tr>
						<th width="30">序 号</th>
						<th>节点名称</th>
						<th>评语</th>
						<th>操作人</th>
						<th>操作时间</th>
					</tr>
				</thead>
				<tbody>
					<c:if test="${instanceModel.nodeList != null }">
						<c:forEach var="node" items="${instanceModel.nodeList }" varStatus="i">
							<tr>
								<td align="center" width="20"><c:out value="${i.count }"></c:out></td>
								<td align="center" width="100"><c:out value="${node.nodeName }"></c:out></td>
								<td align="center">
									<font face="华文楷体" size="3"
									<c:choose>
										<c:when test="${fn:substring(instanceModel.nodeStatus, i.count-1, i.count) eq 'Y' }">
											color="green"
										</c:when>
										<c:when test="${fn:substring(instanceModel.nodeStatus, i.count-1, i.count) eq 'N' }">
											color="red"
										</c:when>
										<c:otherwise>
											color="#cccccc"
										</c:otherwise>
									</c:choose>
										><c:out value="${fn:split(instanceModel.nodeComments, '|')[i.count-1]}"></c:out>
									</font>
								</td>
								<td align="center" width="90">
									<c:if test="${fn:split(instanceModel.nodeHandlers, '|')[i.count-1] != '-' }">
										<font face="华文新魏" size="3">
											<c:out value="${userMap[fn:split(instanceModel.nodeHandlers, '|')[i.count-1]]}"></c:out>
										</font>
									</c:if>
								</td>
								<td align="center" width="100">
									<c:if test="${fn:split(instanceModel.nodeGmtOperation,'|')[i.count-1] != '-' }">
										<c:out value="${fn:split(instanceModel.nodeGmtOperation,'|')[i.count-1]}"></c:out>
									</c:if>
								</td>
							</tr>
						</c:forEach>
					</c:if>
				</tbody>
			</table>
			<table>
				<tr>
					<th style="font-weight: bold;">
						<input type="hidden" id="relatedNo" value="${instanceModel.relatedNo}" />
						<c:out value="${instanceModel.nodeList[instanceModel.currentNodeIndexes[0]-1].memo }"></c:out>：
						<span style="color: blue;font-weight: normal;">(必填)</span>
					</th>
					<td align="center">
						<textarea id="comments" cols="58%" rows="3" style="resize:none;float: left;"></textarea>
						<span id="prompt"></span>
					</td>
				</tr>
			</table>
		</div>
		<div>
			<table class="tt" border="0" cellpadding="0" cellspacing="0" width="100%">
				<tr>
					<td>说明：1.同意————同意、许可并通过；<br>
						&emsp;&emsp;&emsp;2.否决————不同意、不许可并且不予通行；<br>
						&emsp;&emsp;&emsp;3.退回————取消所参考(如果有)节点的操作，不予通行。</td>
					<td width="300px;">
						<div align="right" style="margin-right: 13px;">
							<span class="btn" id="pass"><input type="button" value="同 意" onclick="submitStatus('Y')" /></span>&nbsp;
							<span class="noBtn" id="fail"><input type="button" value="否 决" onclick="submitStatus('N')" /></span>&nbsp;
							<span class="backBtn" id="back"><input type="button" value="退 回" onclick="submitStatus('-')" /></span>&nbsp;
							<span class="btn"><input type="button" value="返 回" onclick="parent.$.fancybox.close()" /></span>
						</div>
					</td>
				</tr>
			</table>
		</div>
	</div>
</c:if>